<template>
    <header>
        <VanNavBar title="文章" left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
        <div class="user">
            <div v-if="userData.obj['user_pic']">
                <div class="pic" :style="{ background: `url(${getImg(authorData.obj['user_pic'])})` }"></div>
            </div>
            <div class="user-b">
                <div class="author">{{ authorData.obj.passname }}</div>
                <div class="t">{{ moment(Number(dataObj.obj.t)).format("MM/YY/dd h:mm:ss ") }}</div>
            </div>
            <div class="top-icon">
                <div class="like">
                    <van-icon v-if="!isLike" name="like-o" @click="cancel(0)" />
                    <van-icon v-else color="pink" name="like" @click="add(0)" />
                </div>
                <div class="collect">
                    <van-icon v-if="!isCollect" name="star-o" @click="cancel(1)" />
                    <van-icon v-else color="pink" name="star" @click="add(1)" />
                </div>
            </div>
        </div>
        <h1>{{ dataObj.obj.title }}</h1>
        <div class="content" v-html="dataObj.obj.content"></div>
        <ul class="img-list">
            <li v-for="i in dataObj.obj.pic">
                <img v-if="i" :src="getImg(i)" alt="" />
            </li>
        </ul>
    </main>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { getUserData } from "@/fun/fun";
import { getUserMsg, getImg, getEssayDetailed, getUserIdMsg, setViewAdd, setAddEssay, setCancelEssay, setLC } from "@/api/api";
import { reactive, ref } from "vue";
import axios from "axios";
import moment from "moment";
let router = useRouter();
let route = useRoute();
// 用户数据
let userData = reactive({ obj: {} });
let userId = ref("");
let userLikeArr = ref({ arr: [] });
let userCollectArr = ref({ arr: [] });
// 文章信息
let dataObj = reactive({ obj: {} });
let likesNum = ref(0);
let collectsNum = ref(0);
// 作者id
let authorid = ref("");
// 文章id
let essayId = ref("");
// 作者信息
let authorData = reactive({ obj: {} });
// 是否点赞
let isLike = ref(false);
// 是否收藏
let isCollect = ref(false);
// 返回上一步
const onClickLeft = () => router.go(-1);
// 初始化数据
let dataFun = async () => {
    // 初始化用户数据
    let getUserDataApi = () => {
        return axios(getUserMsg(getUserData()));
    };
    await getUserDataApi().then(({ data }) => {
        userData.obj = data[0];
        userId.value = userData.obj.id;
        userLikeArr.arr = userData.obj.likes;
        userCollectArr.arr = userData.obj.collect;
    });
    // 初始化文章
    let essayDetailedApi = () => {
        let id = route.query.id;
        return axios(getEssayDetailed(id));
    };
    await essayDetailedApi().then(({ data }) => {
        if (data.data[0]) {
            dataObj.obj = data.data[0];
        }
        authorid.value = dataObj.obj.authorid;
        essayId.value = dataObj.obj.id;
        likesNum.value = dataObj.obj.likes;
        collectsNum.value = dataObj.obj.collect;
        console.log(2222, dataObj.obj);
        console.log(3333, likesNum.value);
        // 初始化喜欢收藏状态
        if (userLikeArr.arr.indexOf(essayId.value) >= 0) {
            isLike.value = true;
        } else {
            isLike.value = false;
        }
        if (userCollectArr.arr.indexOf(essayId.value) >= 0) {
            isCollect.value = true;
        } else {
            isCollect.value = false;
        }
    });
    // 作者信息
    let getAuthorMsg = () => {
        let type = "";
        let t = authorid.value.substring(0, 1);
        if (t == "u") {
            type = "u";
        } else {
            type = "b";
        }
        return axios(getUserIdMsg(authorid.value, type));
    };
    await getAuthorMsg().then(({ data }) => {
        authorData.obj = data[0];
    });
    //  观看量加一
    let setViewAddApi = () => {
        axios.post(setViewAdd(), {
            views: ++dataObj.obj.views,
            id: dataObj.obj.id,
        });
    };
    setViewAddApi();
};
dataFun();
// 添加喜欢/收藏
let cancel = (t) => {
    let type;
    let num;
    if (!t) {
        isLike.value = true;
        type = "likes";
        num = ++likesNum.value;
    } else {
        type = "collect";
        isCollect.value = true;
        num = ++collectsNum.value;
    }
    axios
        .post(setAddEssay(), {
            essayId: essayId.value,
            userId: userId.value,
            type,
        })
        .then(({ data }) => {
            console.log(essayId.value, type, num);
            if (data.s == 200) {
                axios.post(setLC(), {
                    num,
                    id: essayId.value,
                    type,
                });
            }
        });
};
// 取消喜欢/收藏
let add = (t) => {
    let type;
    let num;
    if (!t) {
        isLike.value = false;
        type = "likes";
        num = --likesNum.value;
    } else {
        type = "collect";
        isCollect.value = false;
        num = --collectsNum.value;
    }
    axios
        .post(setCancelEssay(), {
            essayId: essayId.value,
            userId: userId.value,
            type,
        })
        .then(({ data }) => {
            if (data.s == 200) {
                console.log(essayId.value, type, num);
                axios.post(setLC(), {
                    id: essayId.value,
                    type,
                    num,
                });
            }
        });
};
</script>

<style lang="scss" scoped>
main {
    padding: 2vh 5vw;
    .user {
        position: relative;
        display: flex;
        .pic {
            width: 40px;
            height: 40px;
            background-position: center !important;
            background-size: cover !important;
            border-radius: 50%;
            margin-right: 10px;
        }
        .author {
            font-size: 18px;
            font-weight: 600;
        }
        .t {
            font-size: 14px;
        }
        .top-icon {
            position: absolute;
            width: 60px;
            justify-content: space-between;
            right: 5px;
            display: flex;
            font-size: 26px;
            line-height: 40px;
        }
    }
    h1 {
        margin-top: 10px;
        font-size: 20px;
        font-weight: 600;
    }
    .content {
        margin-top: 10px;
    }
    ul {
        margin-top: 10px;
        width: 100%;
        li {
            width: 100%;
            img {
                width: 100%;
            }
        }
    }
}
</style>
